<template>
  <div>
    <r-search
      ref="search"
      :searchData="searchData"
      :searchForm="searchForm"
      :searchHandle="searchHandle"
      :inline="true"
    />
    <r-table
      :isPagination="true"
      :isHandle="true"
      :tableData="tableData"
      :tableCols="tableCols"
      :tablePage="tablePage"
      :loading="tableLoading"
      :tableHandles="tableHandles"
      :isSelection="false"
      @refresh="page()"
    />
    <r-form
      :formRules="formRules"
      :formHandle="formHandle"
      :formData="formData"
      :formCols="formCols"
      ref="elForm"
      labelWidth="200px"
      dialogWidth="700px"
      :isHandle="true"
    />
    <button></button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        userId: "",
        day: "",
        couponId: ""
      },
      formCols: [
        {
          type: "input",
          label: "Userid",
          placeholder: "Please Input User ID",
          width: 350,
          prop: "userId",
          isDisabled: () => true
        },
        {
          type: "select",
          label: "Coupon",
          width: 350,
          prop: "couponId",
          options: []
        },
        {
          type: "input",
          label: "CouponPeriod Of Validity",
          placeholder: "Please InputCouponPeriod Of Validity",
          width: 350,
          prop: "day"
          // remark: "天"
        }
      ],
      formRules: {
        userId: [{ required: true, message: "Please Input", trigger: "blur" }],
        day: [{ required: true, message: "Please Input", trigger: "blur" }],
        couponId: [
          { required: true, message: "Please Select", trigger: "blur" }
        ]
      },
      formHandle: [
        {
          label: "Cancel",
          handle: e => this.elFormVisible()
        },
        {
          label: "Confirm",
          type: "success",
          handle: e => this.elFormSubmit()
        }
      ],

      userDetailsData: {
        show: false
      },
      cardLab: "设为月卡",
      searchData: {
        day: ""
      },
      searchForm: [
        { type: "input", placeholder: "Interval Days", prop: "day", width: 250 }
      ],
      searchHandle: [
        {
          type: "primary",
          label: "Search",
          plain: true,
          handle: e => {
            this.zeroFn();
            this.getData();
          }
        }
      ],
      tableLoading: false,
      tableData: [],
      tableCols: [
        { label: "User", prop: "userName" },
        { label: "Phone", prop: "phone" },
        { label: "Order Nnumber", prop: "orderNo" },
        {
          label: "Order Status",
          prop: "status",
          formatter: e =>
            e.status === 0
              ? "Underway"
              : e.status === 1
              ? "Completed"
              : e.status === 2
              ? "Overdue"
              : e.status === 3
              ? "Already Cancel"
              : "--"
        },
        { label: "Old Battery", prop: "oldBatteryNo" },
        { label: "New Battery", prop: "newBatteryNo" },
        {
          label: "Battery Status",
          prop: "btStatus",
          formatter: e =>
            e.btStatus === 0
              ? "Leased"
              : e.btStatus === 1
              ? "Already Return"
              : e.btStatus === 2
              ? "Not Returned"
              : e.btStatus === 3
              ? "Illegality Battery"
              : "--"
        },
        {
          label: "Interval Days",
          prop: "diffDay",
          formatter: e => e.diffDay + "/day" || "--",
          itemClass: e => "danger"
        },
        { label: "Payment Time", prop: "ftime" },
        { label: "Submission Time", prop: "ctime" }
      ],
      tableHandles: [],

      checkBox: [],
      tablePage: { limit: 10, page: 1, total: 0 }
    };
  },
  created() {},
  mounted() {
    this.getData();
    // this.batteryTypeList();
  },
  methods: {
    zeroFn() {
      this.tablePage.limit = 10;
      this.tablePage.page = 1;
      this.tablePage.total = 0;
    },
    async elFormSubmit() {
      this.$refs.elForm.$refs.ruleForm.validate(async valid => {
        if (valid) {
          let res = await this.apis.couponPutCoupon(this.formData);
          this.$message({
            type: res.code == 200 ? "success" : "error",
            message: res.msg
          });
          this.elFormVisible();
          this.getData();
        }
      });
    },
    async batteryTypeList() {
      let res = await this.apis.couponList({
        pageNum: 1,
        pageSize: 100
      });
      let list = res.rows || [];
      let options = [];
      list.map(res => {
        options.push({
          label: res.name,
          value: res.id
        });
      });
      this.formCols[
        this.labIndex2(this.formCols, "couponId")
      ].options = options;
    },
    elFormDetail(row) {
      Object.keys(this.formData).forEach(key => {
        this.formData[key] = row[key];
      });
      this.elFormVisible();
    },
    userDetailsCall() {
      this.userDetailsData.show = false;
    },

    async setCard(id) {
      var res = await this.apis.setMonthCard({
        userId: id
      });
      this.getData();
    },

    async cancelCard(id) {
      var res = await this.apis.cancelMonthCard({
        userId: id
      });
      this.getData();
    },

    async usersys_updata(row) {
      var res = await this.apis.usersys_updata({
        id: row.id,
        state: row.state == 34 ? 35 : 34
      });
      this.getData();
    },
    async getData() {
      let parm = {
        ...this.searchData,
        ...{
          pageNum: this.tablePage.page,
          pageSize: this.tablePage.limit
        }
      };
      var res = await this.apis.orderExchangeGetLastUserOrderByDay(parm);
      this.tableData = res.rows || [];
      this.tablePage.total = res.total;
    },
    page() {
      this.getData();
    }
  }
};
</script>

<style scoped lang="scss"></style>
